<template>
  <view class="container-component">
    <piece>
      <piece-item content-left="备注" left-icon="compose" :content-right="remarkText" @click="visiblePopup = true" />
    </piece>
    <popup class="popup" v-model:visible="visiblePopup" height="70%">
      <template #content>
        <view class="title">
          <span class="title-text">添加备注</span>
          <span class="done" @click="editDone">完成</span>
        </view>
        <view class="content">
          <view class="text-input">
            <uni-easyinput type="textarea" v-model="tmpInputText" placeholder="请输入备注信息。"></uni-easyinput>
            <view class="text-occupancy-ratio" :class="{ overrun: tmpInputText.length > props.maxTextLength }"
              >{{ tmpInputText.length }}/{{ props.maxTextLength }}</view
            >
          </view>
        </view>
      </template>
    </popup>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import Piece from '@/components/piece/index.vue'
import PieceItem from '@/components/piece/piece-item/index.vue'
import Popup from '@/components/popup/index.vue'
const props = defineProps({
  maxTextLength: {
    type: Number,
    default: 50
  }
})
const remarkText = ref('')
// 未保留到remarkText的文本
const tmpInputText = ref('')
// 调起弹窗
const visiblePopup = ref(false)
function editDone() {
  // 完成逻辑
  remarkText.value = tmpInputText.value
  visiblePopup.value = false
}
// 当隐藏后，值必定是：tmpInputText == remarkText
watch(
  () => visiblePopup.value,
  () => {
    tmpInputText.value = remarkText.value
  }
)
defineExpose({
  remarkText
})
</script>

<style scoped lang="scss">
.container-component {
  margin-top: 25rpx;
}

.popup {
  $title-height: 80rpx;

  position: relative;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25rpx;
    height: $title-height;
    border-bottom: 1px solid #d9d9d9;
    box-sizing: border-box;

    .title-text {
      font-weight: 700;
      color: #636363;
    }
  }

  .content {
    position: absolute;
    inset: $title-height 0 0 0;
    padding: 20rpx 30rpx;

    .text-input {
      .text-occupancy-ratio {
        float: right;
        font-size: 26rpx;
        line-height: 60rpx;
      }

      .overrun {
        color: red;
      }
    }
  }
}
</style>
